<template>
    <van-tabbar
      safe-area-inset-bottom
      v-model="active" 

    >
      <van-tabbar-item
      replace
      to="/home"
      >
         <span>大厅</span>
        <template #icon="props">
          <img 
          :src="props.active ? home.active : home.inactive" />
        </template>
        
      </van-tabbar-item>
       <van-tabbar-item
       replace
       to="ranking"
      >
        <span>排名</span>
        <template #icon="props">
          <img 
          :src="props.active ? rank.active : rank.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item 
      to="/workBenchs"
      >
        <template  #icon="props">
          <img class="worspaceFont"
          :src="props.active ? workspace.active : workspace.inactive" /> 
        </template>
        
      </van-tabbar-item>
      <van-tabbar-item
      replace
      to="/task"
      >
        <span>任务</span>
        <template #icon="props">
          <img 
          :src="props.active ? task.active : task.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
      replace
      to="/care"
      >   
        <span>关怀</span>
        <template #icon="props">
          <img
          :src="props.active ? care.active : care.inactive" />
        </template> 
      </van-tabbar-item>
    </van-tabbar>
</template>

<script>
import {Tabbar, TabbarItem, Image} from "vant";
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      menu: [],
      home: {
        active:require("../static/workBench/nav/home_click.png"),
        inactive:require("../static/workBench/nav/home.png")
      },
      rank: {
        active: require("../static/workBench/nav/rank_click.png"),
        inactive: require("../static/workBench/nav/rank.png")
      },
      workspace : {
        active: require("../static/workBench/nav/workspace_click.png"),
        inactive: require("../static/workBench/nav/workspace.png")
      },
      task: {
        active: require("../static/workBench/nav/task_click.png"),
        inactive: require("../static/workBench/nav/task.png")
      },
      care: {
        active: require("../static/workBench/nav/care_click.png"),
        inactive: require("../static/workBench/nav/care.png")
      },
      list_ranking_one: false,
      list_ranking_two: true,
       options: {
        delayOnTouchOnly: true,  //开启触摸延时
        direction: 'vertical',   //拖动方向
        delay: 500,              //延时时长
        touchStartThreshold: 3,  //防止某些手机过于敏感(3~5 效果最好)
        chosenClass: 'chosen',   //选中之后拖拽项添加的class名(用于选中时候添加样式)
      },
    };
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Image.name]: Image,
  },
  methods:{
     onChange(index) {
      return this.$route.path == path
    },
  }
  // methods: {
    // show_list() {
      // let menu = this.menu;
      // for (let i = 0; i < menu.length; i++) {
      //   if (menu[i].href == "ranking") {
      //     this.$router.replace("/barchar");
      //     this.$router.push({
      //       //核心语句
      //       path: "/barchar", //跳转的路径
      //       query: {
      //         //路由传参时push和query搭配使用 ，作用时传递参数
      //         showmenu: false
      //       }
      //     });
      //   } else {
      //     this.$toast("你没有权限，请联系管理员");
      //     return false;
      //   }
      //   // if (menu[i].href.indexOf("")==0) {
      //   //  this.$toast("你没有权限，请联系管理员");
      //   //  return false;
      //   //     // this.$router.replace("/barchar");
      //   // }else{
      //   //   // this.$router.replace("/barchar")
      //   //   //  :to="{path:'/barchar',}"
      //   // }
      // }
    // },
    // 权限配置
    // async show_Jurisdiction() {
    //   let userId = localStorage.getItem("userId");
    //   // let corpId = this.$utils.getUrlKey("custid");
    //   let corpId = localStorage.getItem("custid");
    //   const res = await this.$http.get(
    //     `dingapi/getJurisdiction?corpId=${corpId}&userId=${userId}`
    //   );
    //   this.menu = res.data.data;
    // }
  // }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.worspaceFont {
  display: inline-block;
  height: 40px;
}

</style>
